<template>
  <div class="scenecont">
    <div style="width: 1200px; margin: 0 auto">
      <!-- 面包屑 -->
      <a-breadcrumb class="Allbreadcrumb" separator=">">
        <a-breadcrumb-item>
          <a href="/">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item><a href="/competition/index">大赛活动</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item><a href="/competition/track">互联网及服务</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item><a href="/competition/track">低代码</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item><a href="/competition/details">项目详情</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item><a href="/competition/company">公司主页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-ite style="color: #ffbe37">教育培训</a-breadcrumb-ite>
      </a-breadcrumb>
      <!-- 企业简介 -->
      <div class="screen">
        <div class="companyconttop">
          <div class="displayinline">
            <img class="qiyeimg" src="@/assets/image/competition/live4.png" alt="">
          </div>
          <div class="displayinline jydetail">
            <p class="txt1">
              教育培训视频标题文本
            </p>
            <p class="txt2">
              讲师：李明	标签：标签名称	分类：培训
            </p>
            <p class="txt3">
              通过全面、精心、独特的培训和服务，为失业妇女及残障人员等贫困弱势人群搭建起学习、互助为失业妇女及残障人员等贫困弱势人群搭建起学习、互助、交流的平台，使他们在参与社会。
            </p>
            <div>
              <button class="gxqbtn"  v-if="!collectFlage" @click="collectFlag()">
                <a-icon type="star" style="color: #ffbe37" /> 感兴趣
              </button>
              <button class="gxqbtn"
                v-else
                @click="collectFlag()"
              >
                <a-icon type="star" style="color: #ffbe37" /> 已感兴趣
              </button>
              <span class="frl">
                <span class="border50"></span>
                <span @click="gotocompany()">企业名称</span>
              </span>
            </div>

          </div>
        </div>
      </div>

      <!-- 详细介绍 -->
      <div class="companydetail">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="详情介绍">
            <h1>适用人群</h1>
            <p>适合0基础想要入行直播的同学有一定经验想要突破瓶颈的直播运营想要快速占领直播赛道的品牌方</p>
            <h1>课程概述</h1>
            <p>适合0基础想要入行直播的同学有一定经验想要突破瓶颈的直播运营想要快速占领直播赛道的品牌方</p>
            <h1>学习计划</h1>
            <p>
每天保持2个小时学习时间 课下多查阅资料 可以自我总结归纳。有问题及时提问 不要积压问题，3天可以完全掌握本套课程。

</p>
            <h1>课程特色</h1>
            <p>
对快手直播有着深刻的理解和经验，从0到月销500W的实操方法，轻松掌握快手直播，包括直播运营、直播投流、帐号人设、视频运营、活动运营、主播话术等</p>
          </a-tab-pane>
        </a-tabs>
      </div>



    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: "1",
        activeKey:'1',
        collectFlage: false,
      }
    },

    watch: {

    },
    mounted() {


    },
    methods: {
      gotojypx(){ //前往教育培训页面
        this.$router.push('/competition/company')
      },
      // 收藏功能,暂时不全
      collectFlag(e) {
        console.log(e)
        this.collectFlage = !this.collectFlage;
      },
    }
  }
</script>

<style scoped="scoped">
  .txt1 {
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    margin-bottom: 12px;
    line-height: 38px;
  }

  .companydetail p{
    margin:0 0 20px 0;
  }

  h1{
    font-weight: bold;
  }

  .frl{
    float: right;
        margin-top: 10px;
  }

  .jydetail{
    width: 755px;
    margin-left: 20px;
  }

  .border50 {
    width: 24px;
    height: 24px;
    background-color: rgba(216, 216, 216, 1);
    border-radius: 50%;
    display: inline-block;
    vertical-align: sub;
    margin-right: 8px;
  }

  .gxqbtn{
    width: 120px;
    height: 40px;
    background: rgba(255, 190, 55, 0.18);
    border-radius: 4px;
    border: 1px solid #FFBE37;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    cursor: pointer;
  }

  .txt2{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-bottom: 12px;
  }

  .txt3{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-bottom: 80px;
    line-height: 22px;
  }

  .jyxxul{
    padding: 16px 0;
  }

  .jyxxul>li{
    position: relative;
    padding: 8px 0;
    margin-bottom: 24px;
  }

  .txt8{
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-top: 12px;
  }

  .txt9{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .pltop{
    padding: 8px 24px 8px 0;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 34px;
    border-bottom: 1px solid #D8D8D8;
  }

  .txt7{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-top: 19px;
  }

  .jyimgw{
    width: 180px;
    height: 120px;
  }

  .cyimgw{
    width: 158px;
    height: 90px;
  }

  .mt12{
    margin-top: 12px;
  }

  .txt6{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }

  .txt5{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-top: 4px;
  }


  .displayinline2{
    display:inline-block;
    vertical-align: top;
  }

  .jyxmcon{
    width: 420px;
    height: 510px;
    background: #FFFFFF;
    display: inline-block;
    padding: 24px;
  }

  .leftwarp{
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    width: 760px;
  }

  .jypxcon{
    width: 760px;
    height: 522px;
    background: #FFFFFF;
    margin-top: 20px;
    padding: 24px;
  }

  .bottomcont{
    width: 1200px;
    margin-top: 20px;
  }

  .cyxmcon{
    width: 760px;
    height: 318px;
    background: #FFFFFF;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    padding: 24px;
  }

  .mt20 {
    margin: 20px 0
  }

  .scenecont {
    background: #F5F6FA;
    padding-bottom: 20px;
  }

  .h1title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-top: 24px;
  }

  .companydetail {
    width: 1200px;
    height: 480px;
    background: #FFFFFF;
    margin-top: 20px;
    padding: 24px;
  }

  ::-webkit-scrollbar-track-piece {

    border-radius: 6px;
    background-color: #ccc;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #eee;
    background-clip: padding-box;
    min-height: 28px;
  }

  .displayinline {
    display: inline-block;
    vertical-align: top;
  }

  .buttonstyle {
    width: 180px;
    height: 40px;
    background: #FFBE37;
    border-radius: 20px;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 40px;
  }

  .qiyeimg {
    width: 360px;
    height: 240px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    border: 1px solid #D9D9D9;
  }

  .screen {
    width: 1200px;
    height: 288px;
    background: #FFFFFF;
  }

  .companyconttop {
    /* width: 1200px;
    height: 128px;
    background: url(~@/assets/image/competition/companylogo.png) rgba(19, 41, 84, 0.2); */
    padding: 24px 32px;
  }



  /deep/ .ant-tabs-nav .ant-tabs-tab:last-child {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  /deep/ .ant-tabs-nav .ant-tabs-tab-active {
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600 !important;
    color: #1A1A1A;
    text-shadow: none;
  }

  /deep/ .ant-tabs-nav .ant-tabs-tab {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  /deep/ .ant-tabs-ink-bar {
    background-color: #1A1A1A;
  }

  /deep/ .ant-tabs-bar {
    border-bottom: 1px solid #D8D8D8;
  }
</style>
